<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-09-13 18:49:42
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-09-20 18:42:11
 * @FilePath: \郭招娣\app\src\views\Comment.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
   <el-card class="upload-card">
      <el-upload
        class="upload-demo"
        :action="action"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
      >
        <img
          v-if="imageUrl"
          :src="imageUrl"
          class="avatar"
          style="width: 100%; height: 200px"
        />
      
        <el-icon color="#409EFC" :size="60"><UploadFilled /></el-icon>
      </el-upload>
    </el-card>


    <el-card class="title-card" shadow="always">
    
      <div class="card-item">
        文件名称:<el-input
          v-model="formInline.title"
          placeholder="请输入文章标题"
          style="width: 200px"
        />
         文件类型:<el-input
          v-model="formInline.title"
          placeholder="请输入文章标题"
          style="width: 200px"
        />
      </div>
      <div class="btns">
        <el-button type="primary" @click="searchChange">搜索</el-button>
        <el-button>重置</el-button>
      </div>
    </el-card>

    <el-card class="knowledge-card">
      <div class="img-card">
        <dl v-for="(v, i) in data" :key="i" class="dl" @click="detail(v)">
          <dt>
            <img
              :src="v.url"
              alt=""
              style="width: 100%; height: 200px; border: 1px solid #ccc"
            />
          </dt>
          <dd
            style="
              width: 100%;
              border: 1px solid #ccc;
              border-top: 0;
              padding: 10px;
            "
          >
            <p>{{ v.name }}</p>
            <p>{{ v.lastModified }}</p>
          </dd>
        </dl>
      </div>
      <!-- 分页 -->
      <el-pagination
        style="
          display: flex;
          align-items: center;
          justify-content: flex-end;
          margin-top: 10px;
        "
        small
        background
        :page-size="pageSize"
        :page-sizes="[1, 2, 3, 4]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <!-- {{data}} -->
    </el-card>
   <!-- 抽屉 -->
    <el-drawer v-model="drawer" :direction="direction" size='500px'>
    <template #title>
     <div >
       <h4>文件信息</h4>
    
        <img :src="this.file.img" alt="" style="width:500px;margin-top:80px">
        <p>文件名称:{{this.file.name}}</p>
        <p>存储路径:{{this.file.etag}}</p>
        <p>文件类型:{{this.file.type}}</p>
        <p>文件大小:{{this.file.size}}</p>
        <p>访问链接:   <el-input v-model="this.file.url" style="width:300px" /> 复制</p>

     </div>
    </template>
    <template #default>
      <div>
       
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="cancelClick">cancel</el-button>
        <el-button type="primary" @click="confirmClick">confirm</el-button>
      </div>
    </template>
  </el-drawer>
 
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import  KnowledgeDrawer  from "../views/KnowledgeDrawer/KnowledgeDrawer.vue";
// import { asyncKnowledgeLists } from "../api/knowledge";
import { asyncImg } from "../api/file";
import { Edit, Share, UploadFilled } from "@element-plus/icons-vue";
export default {
  components: {
    KnowledgeDrawer,
    Edit,
    Share,
    UploadFilled,
  },
  data() {
    return {
      action: "/api/upload",
      imageUrl: "",
      data: [],
      // 面包屑
      breadList: [],
      //   文章数据
      // tableData: [],
      isHidden: false,
      desc: "",
      name: "",
      formInline: {
        title: "",
        status: "",
      },
      pageCode: 1,
      pageSize: 6,
      total: 0,
      option: ["已发布", "草稿"],
      drawer:false,
      file:{
        img:'',
        name:'',
        etag:'',
        type:'',
        size:'',
        url:''
      }
    };
  },
  created() {
    this.init();
      this.upload()

  },
  methods: {
    ...mapMutations({
      getBreadList: "getBreadList",
      getWorkbench: "getWorkbench",
    }),
    // 初始化页面
    init() {
      this.getBreadList({ breadList: this.$route.meta.breadList });
      this.getWorkbench({ workbench: false });
      // this.getKnowledgeLists();
      this.upload()
    },
     async upload() {
      const res = await asyncImg("/uploadImg");
      this.data = res.data.urlList;
      this.total=res.data.total
    },
    handleAvatarSuccess(res) {
      if (res.code == 200) {
         console.log(res);
        this.imageUrl = res.result.url;
      }
    },
    detail(v){
      console.log(v)
      this.drawer=true
      this.file.img=v.url;
      this.file.name=v.name;
      this.file.etag=v.etag;

      this.file.type=v.type;

      this.file.size=v.size;
      this.file.url=v.url;


    },
    // 请求数据方法
    // async getKnowledgeLists() {
    //   let flag = "";
    //   if (this.formInline.status == "已发布") {
    //     flag = "true";
    //   } else if (this.formInline.status == "草稿") {
    //     flag = "false";
    //   }
    //   console.log("--------------");
    //   const res = await asyncKnowledgeLists("/knowledgeLists", {
    //     user: this.formInline.title,
    //     status: flag,
    //     pageCode: this.pageCode,
    //     pageSize: this.pageSize,
    //   });
    //   console.log(res);
    //   this.tableData = res.data.results;
    //   this.total = res.data.total;
    // },
    // 搜索
    // searchChange() {
    //   this.getKnowledgeLists();

    // },
    // 新建
    addKnowLists() {
      this.drawer = true;
    },
    // 确定关闭
    confirmClick() {
      this.drawer = false;
    },

    // 分页
    handleSizeChange(val) {
      console.log(val, "44");
      this.pageSize = val;
      this.getKnowledgeLists();
    },
    // handleCurrentChange(val) {
    //   this.pageCode = val;
    //   console.log(val);
    //   this.getKnowledgeLists();
    // },
  },
};
</script>
<style scoped>
.title-card,
.upload-card,
.box-card {
  margin-top: 20px;
}
.card-item {
  display: flex;
  align-items: center;
  justify-content: space-around;
 
}
.btns {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.knowledge-card {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  align-items: center;
  justify-content: space-between;
}
.dl {
  width: 25%;
  padding: 10px;
}
/* 上传 */
.upload-card,
.img-card,
.box-card {
  margin-top: 20px;
}
.img-card {
  display: flex;
  flex-wrap: wrap;

}

</style>